<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>书写 页面</title>
		<meta name="viewport" content="width=640,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/writing.css"/>
		<style type="text/css">
			img{
				pointer-events:none;
			}
			.main_text{
				z-index: 1;
			}
			#wipe {
				position: absolute;
				width: 580px;
				height:580px;
	            top:130px;
				left: 30px;
	            z-index: 2;
			}
			#bg_mask{
				position: absolute;
				background: #000000;
				opacity: .6;
				z-index: 0;
				width: 100%;
				height: 100%;
				-webkit-transition: all 2000ms linear;
				transition: all 2000ms linear;
			}
			.writing_web .btns{
				z-index: 4;
			}
		</style>
	</head>
	<body>
		<div class="writing_web">
			<div id="bg_mask"></div>
			<!--主要绘制区域-->
			<div class="main_text">
				<img id="zi_bg" src="../images/guang_ori.png"/>
				<div id="wipe"></div>
				<script src="../js/bgg_wipe.js"></script>
				<script>
					var wipe = new Wipe({
						el: '#wipe',
						fg: '../images/canvas/zi1.png',
						size: 50,
						debug: false,
						imgWidth:580,
						imgHeight:580,
				        lineMax : 40,		//笔画最大粗
					    lineMin : 10, 		//笔画最小粗
						color: "rgba(34,23,20,1)",//笔触颜色，褐色
						autoWipe: false,
						data: null,
						onswiping: function (percent) {
//							console.log(percent);
						}
					})
				</script>
				
				
			</div>
			<!--底部按钮-->
			<div class="btns">
				
				<div class="btn">
					<img class="yanhua"  src="../images/yanhua.png"/>
					<img src="../images/writing_btn1.png"/>
				</div>
				<div class="btn">
					<img class="yanhua"  src="../images/yanhua.png"/>
					<img src="../images/writing_btn2.png"/>
				</div>
				<div class="btn">
					<img class="yanhua"  src="../images/yanhua.png"/>
					<img src="../images/writing_btn3.png"/>
				</div>
			</div>
			
		</div>
		
		
		<!--开始绘画前的遮罩-->
		<!--<div class="mask">
			<div class="pointer">
				<div class="pointer_circle toScale"></div>
				<div class="pointer_circle toScale"></div>
				<div class="pointer_circle"></div>
				<img src="../images/mask_pointer.png"/>
				<img src="../images/mask_text.png"/>
			</div>
			
		</div>-->
		<!--<script src="../js/vconsole.min.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/TweenMax.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			document.addEventListener("touchmove",function(e){
				e.preventDefault();
			},false)
			//手指动画
			TweenMax.to($(".pointer"),2,{
				x:-100,
				repeat:-1,
				yoyo:true
			})
			TweenMax.to($(".toScale").eq(0),1,{
				scale:1.4,
				opacity:0.3,
				repeat:-1,
//				yoyo:true
			})
			TweenMax.to($(".toScale").eq(1),1,{
				scale:1.6,
				opacity:0.0,
				repeat:-1,
//				yoyo:true
			})
			//点击遮罩消失
			$(".mask").on("touchstart",function(){
				TweenMax.to($(".mask"),.5,{
					opacity:0,
					onComplete:function(){
						$(".mask").css("display","none")
					}
				})
			})
			
			//点击按钮
			function flyUp(obj){
				//var bool=bool;
				var flyHeight = 300+Math.floor(Math.random()*250);
				var t1 = new TimelineMax();
				t1.set(obj,{
					display:"block"
				});
				t1.fromTo(obj,.3,{
					opacity:1,
					y:0,
					scale:0.2,
				},{
					y:-flyHeight,
					scale:0.5,
				});
				t1.to(obj,0.2,{
					opacity:0,
					onComplete:function(){
						btn_swi1 =btn_swi2 =btn_swi3 = true
					}
				});
			}
			
			var bg_mask = $("#bg_mask");
			var bg_mask_opacity = .8;
			var t;
			function startT(){
				t =setInterval(function(){
					bg_mask_opacity -=.01;
					bg_mask.css("opacity",bg_mask_opacity);
					console.log(bg_mask_opacity);
				},100)
			};
			function endT(){
				clearInterval(t);
			}
			var btn_swi1 =btn_swi2 =btn_swi3 = true;
			$(".writing_web .btns .btn").eq(0).on("touchstart",function(){
				alert(wipe.getPercent());
//				clearInterval(t);
				wipe.saveImg();
				var _s = $(this);
				if(btn_swi1){
					btn_swi1 = false;
					flyUp(_s.find(".yanhua"));
				}
			})
			$(".writing_web .btns .btn").eq(1).on("touchstart",function(){
				wipe.clear();
				var _s = $(this);
				if(btn_swi2){
					btn_swi2 = false;
					flyUp(_s.find(".yanhua"));
				}
			})
			$(".writing_web .btns .btn").eq(2).on("touchstart",function(){
				var _s = $(this);
				if(btn_swi3){
					btn_swi3 = false;
					flyUp(_s.find(".yanhua"));
				}
			})
			
		</script>
	</body>
</html>
